<template>
<div>
    <el-col :span="24" class="sector">
        <el-form ref="product" :model="product" :rules="rules" label-width="80px">
            <el-col :span="12" :offset="6">
                <el-form-item label="产品名称" prop="productName">
                    <el-input v-model="product.productName"></el-input>
                </el-form-item>
                <el-form-item label="产品价格" prop="productPrice">
                    <el-input v-model="product.productPrice"></el-input>
                </el-form-item>
                <el-form-item label="保险保额" prop="compensation">
                    <el-input v-model="product.compensation"></el-input>
                </el-form-item>
                <el-form-item label="产品分类" prop="belongInsureSortId" required>
                    <el-select v-model="product.belongInsureSortId" placeholder="请选择产品类别" @change="cons(product.belongInsureSortId)">
                        <template v-for="item in sorts">
                            <el-option :label="item.sortName" :value="item['_id']" :key="item['_id']"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" required prop="uptime">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="product.uptime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="有效期" prop="indate">
                    <el-input v-model="product.indate" placeholder="天"></el-input>
                </el-form-item>
                <el-form-item label="产品详情" prop="productIntroduce">
                    <el-input type="textarea" v-model="product.productIntroduce"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认修改</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-col>
</div>
</template>

<script>
import {
    createNamespacedHelpers
} from 'vuex';
const {
    mapState,
    mapActions,
    mapMutations
} = createNamespacedHelpers("publicStore");
import api from '../../http/apis/apis';
export default {
    props: ["id"], //拿到list传过来的ID
    data() {
        return {
            product: {
                belongInsureSortId: "",
                compensation: "",
                imgSrc: "",
                indate: "",
                productIntroduce: "",
                productName: "",
                productPrice: "",
                uptime: "",
                _id: "",
            },
            rules: {
                productName: [{
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 20,
                        message: '长度在 3 到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                belongInsureSortId: [{
                    required: true,
                    message: '请选择保险分类',
                    trigger: "change"
                }],
                productPrice: [{
                    required: true,
                    message: '请选择保险价格',
                    trigger: 'blur'
                }],
                compensation: [{
                    required: true,
                    message: '请输入保额',
                    trigger: 'blur'
                }],
                uptime: [{
                    type: 'date',
                    required: true,
                    message: '请选择受保时间',
                    trigger: 'blur'
                }],
                indate: [{
                    required: true,
                    message: '请选择受保期限',
                    trigger: 'blur'
                }],
                productIntroduce: [{
                    required: true,
                    message: '请填写保险详情',
                    trigger: 'blur'
                }]
            },
            sorts: [],
            choosedSorts: {}
        }
    },
    created() {
        // console.info(this.id);
        this.getItem();
        this.getSorts();
        this.setNowBreadcrumb("insureProduct");
    },
    methods: {
        ...mapMutations(["setNowBreadcrumb"]),
        async getSorts() { //提交信息
            const {
                data
            } = await api.insureProductApi.getSorts();
            if (data.status) {
                this.sorts = data.data;
            };
        },
        async getItem() {
            const {
                data
            } = await api.insureProductApi.getItem(this.id);
            if (data.status) {
                this.product = data.productDetails;
            }
        },
        async modItem() {
            if (this.product) {
                const {
                    data
                } = await api.insureProductApi.modItem(this.product);
                // console.info(data)
                if (data.status) {
                    this.$alert('产品已成功修改', '修改成功', {
                        confirmButtonText: '确定',
                    });
                }
            }
        },
        onSubmit() {
            this.modItem();
        },
        cancel() {
            this.$router.push("/system/insureProduct/GetItems")
        },
        cons(val) {
            console.info(val);
        }
    },
}
</script>

<style lang="scss" scoped>
.sector {
    padding: 20px 0;
}

@import '../../assets/scss/public/sector.scss';
</style>
